<template>
  <div class="search-con">
    <div class="s-box">
      <p class="sb-tit">
        寻找全球专家</p>
      <div class="search-box" v-if="searchType == '1'">
        <el-input placeholder="请输入关键词查询" v-model="searchTxt" @keydown.enter.native="search" class="elinp">
          <div slot="prefix">
            <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
              <span class="el-dropdown-link">
                {{ searchTypeName
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="beforeCommand('domain', '技术领域')">技术领域</el-dropdown-item>
                <el-dropdown-item :command="beforeCommand('name', '姓名')">姓名</el-dropdown-item>
                <el-dropdown-item :command="beforeCommand('org', '机构')">机构</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-button slot="suffix" icon="el-icon-search" @click="search('1')">搜索111</el-button>
        </el-input>
        <div class="search-right">
          <span class="item" @click="reset">
            <img src="@/assets/reset.png" alt="">
            重置
          </span>
          <span>|
          </span>
          <span class="item" @click="changeType('2')">
            <img src="@/assets/highSearch.png" alt="">
            高级检索
          </span>
        </div>


      </div>
      <div class="search-box" v-if="searchType == '2'">
        <div class="search-left">
          <el-input v-model="input" placeholder="请输入专家姓名"></el-input>
          <el-input v-model="input" placeholder="请输入机构"></el-input>
          <el-select v-model="selectVal" placeholder="请选择地区" size="mini" ref="select">
            <el-input class="input" placeholder="请输入内容搜索查询" prefix-icon="el-icon-search" v-model="treeFilter" size="mini"
              clearable></el-input>

            <el-option hidden key="id" :value="selectVal" :label="selectName">
            </el-option>
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"
              :check-on-click-node="true" ref="tree" node-key="id" :default-expand-all="true"
              :filter-node-method="filterNode">
              <span slot-scope="{ data }">
                <span>{{ data.label }}</span>
                <el-tag size="mini" style="margin: 0 10px" v-show="filterorgType(data.tag)">{{ filterorgType(data.tag)
                }}</el-tag>
              </span>
            </el-tree>
          </el-select>
          <el-select v-model="value" placeholder="请选择产业">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="value" placeholder="请选择领域">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>


        </div>
        <div class="search-right">
          <el-button>搜索</el-button>
          <span class="item" @click="reset">
            <img src="@/assets/reset.png" alt="">
            重置
          </span>
          <span>|
          </span>
          <span class="item" @click="changeType('1')">
            <img src="@/assets/highSearch.png" alt="">
            普通检索
          </span>
        </div>


      </div>
    </div>
    <div class="cont-box">
      <div class="titleList">
        <p>智库列表</p>
        <div class="more" @click="moreListClick">
          <span>更多智库</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="con-list">
        <div class="item-box" @click="goList" v-for="(item, index) in cardList" :key="index">
          <div class="item-con">
            <div style="width: 100%;">
              <div class="content">{{ item.name }}</div>
              <div class="num">
                <span style="font-size: 24px;">{{ item.expert_num }}</span>
                人
              </div>
            </div>

          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 20,
      pageNum: 1,
      cardList: [],
      searchTxt: "",
      searchTypeName: "技术领域",
      selectType: "domain",
      searchType: '1',
      selectVal: "", // select框的绑定值
      selectName: "", // select框显示的name
      treeFilter: "", // 搜索框绑定值，用作过滤
      // 树形控件数据
      treeData: [
        {
          value: "1",
          label: "一级 1菈妮",
          tag: "wife",
          children: [
            {
              value: "1-1",
              label: "二级 1-1",
              children: [
                {
                  value: "1-1-1",
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          value: "2",
          children: [
            {
              value: "2-1",
              label: "二级 2-1",
              children: [
                {
                  value: "2-1-1",
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              value: "2-2",
              label: "二级 2-2",
              children: [
                {
                  value: "2-2-1",
                  label: "三级 2-2-1鸡腿",
                  tag: "princess",
                },
              ],
            },
          ],
        },
        {
          value: "3",
          label: "一级 3",
          children: [
            {
              value: "3-1",
              label: "二级 3-1",
              children: [
                {
                  value: "3-1-1",
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              value: "3-2",
              label: "二级 3-2艾尔登法环",
              tag: "yyds",
              children: [
                {
                  value: "3-2-1",
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 标签数组
      tagList: [
        { value: "wife", label: "老婆" },
        { value: "princess", label: "小公主" },
        { value: "yyds", label: "天下第一" },
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    };
  },
  created() {
  },
  mounted() {
    this.initCard()
  },
  watch: {
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val);
      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    },
  },
  methods: {
    // 列表
    initCard() {
      this.$get(this.$Url.people.banks).then(res => {
        this.cardList = res.data || []
        this.cardList = this.cardList.splice(0,4)
      })

    },
    search(type) {
      const params = {
        size: this.pageSize,
        offset: (this.pageNum - 1) * this.pageSize,
        sort: [
          "-valuation"
        ],
        type: this.selectType,
        interest: this.searchTxt
      }
      this.$post(this.$Url.people.search, params).then(res => {
        // this.cardList=res.data||[]
      })
    },
    // 结构树点击事件
    handleNodeClick(data) {
      this.selectVal = data.value; // select绑定值为点击的选项的value
      this.selectName = data.label; // input中显示值为label
      this.treeFilter = ""; // 点击后搜索框清空
      this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.label.indexOf(value) !== -1;
      return filterRes;
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      let arr = this.tagList.filter((item) => {
        return item.value == val;
      });
      return arr.length ? arr[0].label : "";
    },
    beforeCommand(command, name) {
      return {
        command: command,
        name: name,
      };
    },
    // 切换下拉菜单项
    handleCommand(val) {
      console.log('111',val);
      
      this.searchTypeName = val.name;
      this.selectType = val.command;
    },
    moreListClick() {
      this.$router.push({
        path: '/PD/moreList',
        query: {
          type: 'card'
        }
      })
    },
    goList() {
      this.$router.push({
        path: '/PD/talentList',
        query: {
          type: 'talentList'
        }
      })
    },
    changeType(type) {
      this.searchType = type
    },
    reset() {
      this.pageSize=20;
      this.pageNum=1;
      this.searchTxt='';
      this.selectType='domain'
      this.searchTypeName='技术领域'

    }
  },


};
</script>
<style>
.el-select-dropdown__list {
  padding: 6px 8px !important;
}
</style>
<style lang="scss" scoped>
.el-button {
  background-color: $mainColor !important;
  color: #fff !important;
}

.search-con {
  height: calc(100vh - 0.7rem);
  // background: url("../../../../assets/img/search-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
}

.s-box {
  height: 400px;
  position: relative;
  z-index: 2;
  padding-top: 100px;
  // background-color: $color45;
  color: #fff;
  background: url("../../../../assets/bg.png");
  background-size: 100% 100%;

  .sb-tit {
    margin-bottom: 20px;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
  }

  .search-box {
    position: relative;
    // width: 9.3rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: center;

    .search-left {
      display: flex;
      align-items: center;

      .el-input {
        width: 220px !important;
        margin: 0 10px;
      }

      .el-select {
        width: 300px !important;
        height: 36px !important;
        margin: 0 10px;

        ::v-deep .el-input--mini .el-input__inner {
          height: 36px !important;
          line-height: 36px !important;
        }
      }

    }

    .elinp {
      width: 800px;
      position: relative;

      ::v-deep {
        .el-input__inner {
          height: 0.54rem;
          line-height: 0.54rem;
          padding-left: 1.4rem;
          border-color: $mainColor;
          border-radius: 0.08rem;
          font-size: 0.18rem;
          color: #283146;

          &:focus {
            border-color: $mainColor;
          }
        }

        .el-input__prefix {
          width: 1.3rem;
          height: calc(0.54rem - 2px);
          line-height: calc(0.53rem - 2px);
          margin-top: 1px;
          border-right: 1px solid #dbdef2;

          .el-dropdown-link {
            font-size: 0.16rem;
          }
        }

        .el-input__suffix {
          right: 2px;
          top: 2px;

          .el-button {
            width: 0.94rem;
            border-radius: 0 0.08rem 0.08rem 0;
            font-size: 0.18rem;
            color: #fff;
            background-color: $mainColor;
            border-color: $mainColor;
            height: 0.50rem;
          }

        }
      }

      .search-icon {
        position: absolute;
        top: 0;
      }
    }

    .search-right {
      margin-left: 15px;
      font-size: 16px;

      // width: 200px;
      .item {
        padding: 0 15px;
        cursor: pointer;
      }
    }

    .search-button {
      width: 0.94rem;
      height: 0.54rem;
      border-radius: 0.08rem;
      font-size: 0.18rem;
      color: #fff;
      background-color: $mainColor;
      margin-left: 0.18rem;
      border-color: $mainColor;
    }
  }

}

.cont-box {
  width: 70%;
  margin: 0 auto;

  .titleList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 20px;

    p {
      color: #333;
      font-size: 16px;
      font-weight: 600;

    }

    .more {
      color: #65636D;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .con-list {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    // justify-content: space-between;

    .item-box {
      width: 23%;
      height: 170px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      background: url("../../../../assets/card.png");
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 8px;
      margin: 10px 10px;
      cursor: pointer;


      .item-con {
        width: 100%;
        padding: 15px 25px;
        padding-top: 75px;
        display: flex;
        align-items: center;
        justify-content: center;

        .content {
          color: #211F26;
          font-size: 18px;
          font-weight: 500;
          font-family: PingFang SC, PingFang SC;
          line-height: 24px;
          margin-bottom: 10px;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

        }

        .num {
          color: $mainColor;
          font-size: 24px;
          font-family: MiSans, MiSans;
          line-height: 20px;
        }
      }


    }

    .item-box:hover {
      width: 23%;
      height: 170px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      background: url("../../../../assets/cardHover.png");
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 8px;
      transform: scale(1.01);
      transition: all .4s;

    }
  }
}
</style>
